<template>
	<view class="page">
		<Navbar title="阿姨详情"></Navbar>
		<view class="nanny-info" v-if="detailData.Id">
			<view class="u-margin-bottom-20 u-flex u-col-top">
				<view style="position: relative;">
					<image class="head-img" :src="imgBaseUrl + '/' + detailData.Photo" mode="aspectFill"></image>
					<view class="excellent-border">
						<image class="excellent" src="/static/image/icon-nanny-strict.png"></image>
					</view>
				</view>
				<view class="u-flex-1">
					<view class="u-font-32 u-font-w-6 u-padding-bottom-10">{{ detailData.Name }}
						{{ calculateAge(detailData.BirthDate) }} 岁
					</view>
					<view class="u-flex u-row-between u-padding-bottom-10">
						<view class="u-flex-1">民族：汉族</view>
						<view class="u-flex-1">工作年限：{{ detailData.WorkExp || '' }}年</view>
					</view>
					<view class="u-flex u-row-between u-padding-bottom-10">
						<view class="u-flex-1">籍贯：{{ detailData.DomicilePlace || '' }}</view>
						<view class="u-flex-1" v-if="detailType == 0">月休天数：{{ detailData.WorkExp || '' }} 天</view>
					</view>
					<view class="u-padding-bottom-10">现居地址：{{ detailData.Address || '' }}</view>
					<!-- <view class="u-padding-bottom-10">身份证号：{{ detailData.IdNo.slice(0, -4) + '*'.repeat(4) }}</view> -->
				</view>
			</view>
			<view class="u-padding-bottom-10">
				<view class="type" v-for="value in detailData.Labels" :key="value">{{ value }}</view>
			</view>
			<view class="u-padding-bottom-10">工作范围： {{ detailData.AbilityTypesStr || '' }}</view>
			<view>工资待遇： {{ detailData.Wage ? detailData.Wage + '元起' : '' }}</view>
		</view>
		<view class="nanny-data u-flex u-text-center" v-if="detailData.Id">
			<view class="u-flex-1 line">
				<view class="u-padding-bottom-10">保险</view>
				<view>
					<view class="u-type-primary" v-if="detailData.Bx == true">有</view>
					<view class="u-type-info" v-else>无</view>
				</view>
			</view>
			<view class="u-flex-1 line">
				<view class="u-padding-bottom-10">健康证明</view>
				<view>
					<view class="u-type-primary" v-if="detailData.Jkz == true">有</view>
					<view class="u-type-info" v-else>无</view>
				</view>
			</view>
			<view class="u-flex-1 line">
				<view class="u-padding-bottom-10">证件</view>
				<view>
					<view class="u-type-primary" v-if="detailData.Sgz == true">有</view>
					<view class="u-type-info" v-else>无</view>
				</view>
			</view>
		</view>
		<view class="nanny-data u-flex u-text-center" v-if="detailData.Id">
			<view class="u-flex-1 line">
				<view class="u-padding-bottom-10">身高</view>
				<view class="u-type-primary" style="height: 38rpx;">
					{{ detailData.Height ? detailData.Height + 'cm' : '' }}
				</view>
			</view>
			<view class="u-flex-1 line">
				<view class="u-padding-bottom-10">体重</view>
				<view class="u-type-primary" style="height: 38rpx;">
					{{ detailData.Weight ? detailData.Weight + 'kg' : '' }}
				</view>
			</view>
			<view class="u-flex-1 line">
				<view class="u-padding-bottom-10">婚姻状况</view>
				<view class="u-type-primary" style="height: 38rpx;">
					{{ detailData.MaritalStatus && (detailData.MaritalStatus == '01'?'未婚':detailData.MaritalStatus == '02'?'已婚':detailData.MaritalStatus == '03'?'单身':'') }}
				</view>
			</view>
			<view class="u-flex-1">
				<view class="u-padding-bottom-10">文化程度</view>
				<view class="u-type-primary" style="height: 38rpx;">{{ detailData.Education||'' }}</view>
			</view>
		</view>

		<view class="certificate-data" v-if="detailType == 1">
			<view class="data-title">
				<view>档期</view>
				<image src="/static/image/icon-nanny-embellish.png"></image>
			</view>
			<view class="u-flex u-col-top bottom-line" style="padding: 24rpx 0;" v-for="value in StatusList"
				:key="value">
				<!-- <image style="width: 30rpx;height: 30rpx;" src="/static/image/icon-nanny-experience.png"></image> -->
				<view class="u-flex-1 u-padding-left-10">
					<view class="u-padding-bottom-10">{{ value.date }}</view>
					<view class="settingCleaning_box">
						<view>
							上午 |
							<view :class="['ion', value.sw == false ? 'action' : '']"></view>
							{{ value.sw == false ? '有档期' : '无档期' }}
						</view>
						<view>
							下午 |
							<view :class="['ion', value.xw == false ? 'action' : '']"></view>
							{{ value.xw == false ? '有档期' : '无档期' }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="certificate-data">
			<view class="data-title">
				<view>工作经历</view>
				<image src="/static/image/icon-nanny-embellish.png"></image>
			</view>
			<view>{{ detailData.WorkExperience||'' }}</view>
			<!-- <view class="u-flex u-col-top bottom-line" style="padding: 24rpx 0;">
				<image style="width: 30rpx;height: 30rpx;" src="/static/image/icon-nanny-experience.png"></image>
				<view class="u-flex-1 u-padding-left-10">
					<view class="u-padding-bottom-10">2021-05——2024-10</view>
					<view>家政员 | 家务兼带小孩</view>
				</view>
			</view> -->

		</view>

		<view class="introduce-data" v-if="detailType == 0">
			<view class="data-title">
				<view>自我介绍</view>
				<image src="/static/image/icon-nanny-embellish.png"></image>
			</view>
			<view>{{ detailData.Comment ||'' }}</view>
		</view>
		<view class="introduce-data" v-else>
			<view class="data-title">
				<view>自我介绍</view>
				<image src="/static/image/icon-nanny-embellish.png"></image>
			</view>
			<view>{{ detailData.SelfIntroduction||'' }}</view>
		</view>

		<view class="certificate-data" v-if="detailType == 0 && false">
			<view class="data-title">
				<view>证书信息</view>
				<image src="/static/image/icon-nanny-embellish.png"></image>
			</view>
			<view class="u-flex u-col-top bottom-line" style="position: relative;padding: 24rpx 0;">
				<image style="width: 180rpx;height: 164rpx;border-radius: 16rpx; background-color: #ccc;" src=""
					mode=""></image>
				<view class="u-margin-left-20">
					<view class="u-margin-bottom-10">
						体检报告
						<text class="u-type-primary">（6张）</text>
					</view>
					<view class="u-tips-color">相关资料信息已通过审查</view>
				</view>
				<!-- <view class="look-data">查看资料</view> -->
			</view>
		</view>

		<view class="filtrate-data" v-if="detailData.Id && detailData.IdNo">
			<view class="data-title">
				<view>多维筛选</view>
				<image src="/static/image/icon-nanny-embellish.png"></image>
			</view>
			<view class="u-flex u-row-between bottom-line" style="padding: 24rpx 0;">
				<view class="u-flex-1">
					<view>认证姓名：{{ detailData.Name }}</view>
					<view class="u-tips-color">身份证号：{{ detailData.IdNo.slice(0, -4) }}****</view>
					<view class="u-tips-color">数据来源：中国公民身份信息中心</view>
				</view>
				<view>
					<image style="width: 118rpx;height: 103rpx" src="/static/image/icon-nanny-qualified.png"></image>
				</view>
			</view>
		</view>

		<view class="u-flex footer-button">
			<view class="u-flex-1">
				<u-button type="primary" shape="circle" @click="getContact"
					v-if="phoneShow == false">获取阿姨联系方式</u-button>
				<u-button type="primary" shape="circle" @click="callPhone" v-else>拨打阿姨电话</u-button>
			</view>
		</view>
		<u-popup v-model="show" :round="10" mode="bottom" closeable close-icon-pos="top-right" border-radius="14">
			<view class="Contact">
				<view class="titel">提示</view>
				<view class="test">
					请详细阅读
					<span @click="link_to_page('/pages-home/pages/agreement/disclaimer')">《用户使用协议》</span>
					，点击确定方可获取阿姨联系方式！
				</view>
				<view class="btn"><u-button :ripple="true" type="error" @click="setContact">确定</u-button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailType: '',
				detailId: '',
				detailData: {},
				show: false,
				phoneShow: false,
				StatusList: []
			};
		},
		onLoad(e) {
			this.detailType = e.type;
			this.detailId = e.id;
			this.getDetail();
		},
		methods: {
			//获取阿姨联系方式
			getContact() {
				// var isLogin = uni.getStorageSync('IS_LOGIN')
				// if (this.isLogin) {
					this.show = true;
				// } else {
				// 	this.link_to_page('/pages/login/index');
				// }
			},
			setContact() {
				this.show = false;
				this.phoneShow = true;
				uni.showToast({
					icon: 'none',
					title: '获取成功，点击下方按钮拨打联系方式'
				});
			},
			getDetail() {
				if (this.detailType == 0) {
					// 保姆
					this.$u.api
						.AppEmpInfo({
							id: this.detailId
						})
						.then(res => {
							this.detailData = res?.data ?? {};
							console.log(this.detailData)
						});
				} else {
					// 保洁
					this.$u.api
						.PurifierInfo({
							id: this.detailId
						})
						.then(res => {
							this.detailData = res?.data ?? {};
							var Status = res.data.Status;
							// 使用逗号分隔字符串并转换成数组
							const resultArray = Status.split(',');
							this.StatusList = this.parseData(resultArray);
							console.log(this.StatusList);
						});
				}
			},
			parseData(data) {
				return data.map(item => {
					const parts = item.split('|'); // 分割每一项
					return {
						date: parts[0], // 日期部分
						sw: parts[1] === '02', // sw状态，状态：01=空闲，02=繁忙
						xw: parts[2] === '02' // xw状态，状态：01=空闲，02=繁忙
					};
				});
			},
			//年龄
			calculateAge(birthDateStr) {
				const birthDate = new Date(birthDateStr);
				const today = new Date();
				let age = today.getFullYear() - birthDate.getFullYear();
				const m = today.getMonth() - birthDate.getMonth();
				if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				return age;
			},
			callPhone() {
				// 电话号码为示例，请替换为实际需要拨打的号码
				const phoneNumber = this.detailData.Tel;
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 20rpx 200rpx;
		background-color: #f4f5f7;
	}

	.bottom-line {
		border-bottom: 2rpx solid #dcdcdc;
	}

	.nanny-info {
		// height: 420rpx;
		padding: 26rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		background: linear-gradient(180deg, #ffe4e0 0%, #ffffff 99%);

		.head-img {
			width: 220rpx;
			height: 240rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			background-color: #ccc;
		}

		.excellent-border {
			position: absolute;
			left: 0;
			top: 0;
			width: 220rpx;
			height: 240rpx;
			border: 4rpx solid #616aff;
			border-radius: 10rpx;

			.excellent {
				position: absolute;
				left: -2rpx;
				bottom: -2rpx;
				width: 220rpx;
				height: 38rpx;
			}
		}

		.type {
			display: inline-block;
			border-radius: 6rpx;
			padding: 6rpx 10rpx;
			margin: 0 12rpx 12rpx 0;
			font-size: 24rpx;
			color: #d16c5e;
			border: 2rpx solid #ffada1;
			background-color: #fee7e4;
		}
	}

	.nanny-data {
		border-radius: 16rpx;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
		background-color: #fff;

		.line {
			border-right: 2rpx solid #d4e0e3;
		}
	}

	.data-title {
		position: relative;
		height: 46rpx;
		margin-bottom: 20rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;

		view {
			position: absolute;
			width: 100%;
			z-index: 1;
		}

		image {
			position: absolute;
			left: 50%;
			bottom: 0;
			z-index: 0;
			transform: translateX(-50%);
			width: 190rpx;
			height: 18rpx;
		}
	}

	.filtrate-data {
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.introduce-data {
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;

		.type {
			display: inline-block;
			border-radius: 6rpx;
			padding: 6rpx 10rpx;
			margin: 0 12rpx 12rpx 0;
			font-size: 24rpx;
			color: #d16c5e;
			border: 2rpx solid #ffada1;
			background-color: #fee7e4;
		}
	}

	.certificate-data {
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;

		.look-data {
			position: absolute;
			right: 0;
			bottom: 20rpx;
			width: 140rpx;
			height: 46rpx;
			line-height: 42rpx;
			background: #ffffff;
			border-radius: 23rpx;
			border: 1px solid $u-type-primary;
			text-align: center;
			color: $u-type-primary;
		}
	}

	.footer-button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		padding: 13rpx 20rpx;
		background-color: #ffffff;
	}

	.Contact {
		padding: 7% 2% 11%;
		background-color: #f9f9f9;
	}

	.Contact .titel {
		font-weight: bold;
		font-size: 42rpx;
		color: #333333;
		text-align: center;
		margin-bottom: 4%;
	}

	.Contact .test {
		font-size: 16px;
		color: #333;
		margin-bottom: 45rpx;
		text-indent: 30rpx;
		line-height: 66rpx;
	}

	.Contact .test span {
		font-weight: bold;
		color: #1a73e8;
	}

	.Contact .btn {
		width: 100%;
	}

	.settingCleaning_box {
		display: flex;
		justify-content: space-around;
		padding-top: 15rpx;

		.ion {
			display: inline-block;
			width: 22rpx;
			height: 22rpx;
			margin-left: 18rpx;
			margin-right: 3rpx;
		}

		.action {
			background-color: #00dd1b;
		}
	}
</style>